<template>
  <view class="pages" :style="{ paddingBottom: safeAreaBottom + 85 + 'px' }">
    <view class="profile_title">
      <view class="profile_title_box">
        <image
          :src="detailsInfo?.avatar || 'https://ossresource.miyingbl.com/user_avatar/0.png'"
          mode="scaleToFill"
        />
        <view class="patient">
          <view class="patient_name">{{ detailsInfo?.name }}</view>
          <view class="patient_info">
            <text style="margin-right: 14rpx">{{ detailsInfo?.age }}岁</text>
          </view>
        </view>
      </view>
      <view class="real_identifier" v-if="detailsInfo?.is_certified != 0">已实名</view>
    </view>
    <!-- 基本信息 -->
    <view class="basic_info_box">
      <view class="info_title">基本信息</view>
      <view class="info_list">
        <view style="color: #5c5c5c">性别</view>
        <view style="color: #202020" v-if="detailsInfo?.sex == 3">未知</view>
        <view style="color: #202020" v-if="detailsInfo?.sex == 2">女</view>
        <view style="color: #202020" v-if="detailsInfo?.sex == 1">男</view>
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">身高</view>
        <view style="color: #202020">{{ detailsInfo?.height || '0' }}cm</view>
      </view>
      <view class="info_list">
        <view style="color: #5c5c5c">体重</view>
        <view style="color: #202020">{{ detailsInfo?.weight || '0' }}kg</view>
      </view>
    </view>
    <!-- 病史 -->
    <view class="diseases_history">
      <view style="font-weight: 500; font-size: 30rpx; color: #202020">病史</view>
      <view class="past_diseases">
        <view style="font-weight: 400; font-size: 28rpx; color: #202020">既往病史</view>
        <view v-if="pastList?.length != 0" class="past_diseases_list">
          <view class="list_item" v-for="(item, index) in pastList" :key="index">{{ item }}</view>
        </view>
        <view v-else class="past_diseases_list">
          <view class="list_item_no">{{ detailsInfo?.past_name }}</view>
        </view>
      </view>
      <view class="past_diseases">
        <view style="font-weight: 400; font-size: 28rpx; color: #202020">过敏史</view>
        <view v-if="allergyList?.length != 0" class="past_diseases_list">
          <view class="list_item" v-for="(item, index) in allergyList" :key="index">{{
            item
          }}</view>
        </view>
        <view v-else class="past_diseases_list">
          <view class="list_item_no">{{ detailsInfo?.allergy_name }}</view>
        </view>
      </view>
      <view class="past_diseases" style="border: none">
        <view style="font-weight: 400; font-size: 28rpx; color: #202020">家族史</view>
        <view v-if="familyList?.length != 0" class="past_diseases_list">
          <view class="list_item" v-for="(item, index) in familyList" :key="index">{{ item }}</view>
        </view>
        <view v-else class="past_diseases_list">
          <view class="list_item_no">{{ detailsInfo?.family_name }}</view>
        </view>
      </view>
    </view>
    <!-- 生活方式 -->
    <view class="lifestyle">
      <view style="font-weight: 500; font-size: 30rpx; color: #202020">生活方式</view>
      <view class="lifestyle_list">
        <view style="color: #5c5c5c">是否吸烟</view>
        <view>{{ detailsInfo?.life_smoking_volume || '未知' }}</view>
      </view>
      <view class="lifestyle_list">
        <view style="color: #5c5c5c">是否饮酒</view>
        <view>{{ detailsInfo?.life_drink || '未知' }}</view>
      </view>
    </view>
    <!-- 其他 -->
    <view class="lifestyle">
      <view style="font-weight: 500; font-size: 30rpx; color: #202020">其他</view>
      <view class="lifestyle_list">
        <view style="color: #5c5c5c">是否有性伴侣</view>
        <view>{{ detailsInfo?.other_sex || '未知' }}</view>
      </view>
      <view class="lifestyle_list">
        <view style="color: #5c5c5c">是否有同性伴侣</view>
        <view>{{ detailsInfo?.other_same_sex || '未知' }}</view>
      </view>
      <view class="lifestyle_list">
        <view style="color: #5c5c5c">是否有冶游史</view>
        <view>{{ detailsInfo?.other_medical_history || '未知' }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { navigateTo } from '@/utils'
import { getPatienDetails } from '@/api/patients/index'
import { onMounted } from 'vue'
//详情信息
const detailsInfo = ref({})
//病史
const pastList = ref([])
const allergyList = ref([])
const familyList = ref([])
//底部安全栏高度
const props = defineProps({
  userIds: String,
})
const safeAreaBottom = ref(0)
onMounted(() => {
  userId.value = props?.userIds
  uni.getSystemInfo({
    success: (e) => {
      console.log(e)
      safeAreaBottom.value = e.safeAreaInsets.bottom
    },
  })
  getPatienDetailsF()
})

//获取详情
const userId = ref('')
const isInterrogation = ref(false)
async function getPatienDetailsF() {
  const res = await getPatienDetails({ uid: userId.value, type: 2 })
  if (res?.code == 200) {
    pastList.value = res?.data[0]?.past
    allergyList.value = res?.data[0]?.allergy
    familyList.value = res?.data[0]?.family
    detailsInfo.value = res?.data[0]
    if (detailsInfo.value.type == 2) {
      detailsInfo.value.baby_sex = detailsInfo.value.baby_sex == 0 ? '女' : '男'
    }
    if (res?.data[0]?.is_chat == 1) {
      isInterrogation.value = true
    } else {
      isInterrogation.value = false
    }
  }
}
//问诊
function toInterrogation() {
  if (isInterrogation.value) {
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${detailsInfo?.value?.uid}&avatar=${detailsInfo?.value?.avatar}&name=${detailsInfo?.value?.name}`,
    )
  } else {
    return false
  }
}
</script>
<style>
page {
  background: #f5f6f8;
}
</style>
<style lang="scss" scoped>
.pages {
  width: 100%;
  font-family: PingFangSC, PingFang SC;
  display: flex;
  flex-direction: column;
  align-items: center;
  .profile_title {
    width: 702rpx;
    height: 140rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    margin-top: 20rpx;
    .real_identifier {
      width: 118rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      border-top: 1rpx solid #00c1b9;
      border-bottom: 1rpx solid #00c1b9;
      border-left: 1rpx solid #00c1b9;
      font-size: 24rpx;
      color: #00c1b9;
      text-align: center;
      line-height: 48rpx;
    }
    .profile_title_box {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
      }
      .patient {
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 20rpx;
        .patient_name {
          font-size: 30rpx;
          color: #202020;
          font-weight: 600;
        }
        .patient_info {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #5c5c5c;
          .name_leng {
            width: 1rpx;
            height: 24rpx;
            background: #5c5c5c;
          }
        }
      }
    }
  }
  .basic_info_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin: 20rpx 0;
    .info_title {
      font-size: 30rpx;
      color: #202020;
      font-weight: 500;
      margin-bottom: 10rpx;
    }
    .info_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 1rpx solid #e8e8e8;
      font-size: 28rpx;
      &:last-child {
        border-bottom: none;
        height: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
  //病史
  .diseases_history {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    .past_diseases {
      margin-top: 20rpx;
      width: 662rpx;
      border-bottom: 1rpx solid #e8e8e8;
      .past_diseases_list {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20rpx;
        // &::after {
        //   content: '';
        //   width: 26%;
        // }
        .list_item {
          background: #e1f7f6;
          border-radius: 20rpx;
          padding: 25rpx 26rpx;
          font-size: 28rpx;
          color: #202020;
          margin-bottom: 20rpx;
          margin-right: 20rpx;;
        }
        .list_item_no {
          border-radius: 20rpx;
          font-size: 28rpx;
          color: #202020;
          margin-bottom: 20rpx;
        }
      }
    }
  }
  //生活方式
  .lifestyle {
    width: 702rpx;
    background: #ffffff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    .lifestyle_list {
      font-size: 28rpx;
      color: #202020;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #e8e8e8;
      &:last-child {
        border: none;
      }
    }
  }
  .bottom_box {
    width: 750rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    .interrogation_btn {
      margin: 20rpx auto;
      width: 702rpx;
      height: 88rpx;
      background: #d6e2e1;
      border-radius: 48rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
    .interrogation_btn_active {
      background: #00c1b9;
    }
  }
}
</style>
